/**
 * Created by levy on 16/6/15.
 */

{
    /**
     * @desc 滑动组件单个img
     *
     * @param enlargeHandler 图片放大函数, 与LargeImg组件结合使用
     * @param deleteFn 删除图片函数
     */
    const SwiperImg = React.createClass({
        componentDidMount: function () {
            var me = this;

            if(typeof mui != 'undefined')
                React.findDOMNode(this.refs.imgItem).addEventListener('tap', function (e) {
                    me.props.enlargeHandler && me.props.enlargeHandler(this.getAttribute('src'));
                }, !1);
            else
                React.findDOMNode(this.refs.imgItem).addEventListener('touchend', function (e) {
                    me.props.enlargeHandler && me.props.enlargeHandler(this.getAttribute('src'));
                });
        },
        render: function () {
            var img_url = this.props.data,
                deleteFn = this.props.deleteFn;
            //console.log(img_url)

            //阿里云图片前缀,写在layout里, 作为全局变量的属性
            if(img_url.indexOf("http") == -1 && img_url.indexOf("wuye/oa") > -1){
                img_url = liefeng.imgPreUrl + img_url;
            }
            return (
                <div className="swiper-slide">
                    <div className="swiper-activity-img ">
                        <img src={img_url} alt="" ref="imgItem" />
                        {
                            deleteFn ? <a className="delete-icon" onTouchEnd={deleteFn}/> : ''
                        }
                    </div>
                </div>
            )
        }
    });

    /**
     * TODO 可能需要修改引入方式
     * 需要在页面上添加
     <script src="../public/js/lib/idangerous.swiper-2.0.min.js"></script>
     * @desc [img滑动组件] 不需做初始化. 不想显示, 传字符串 ;'null'
     *
     * @param [imgList]
     * @imgList: 图片地址数组,为空默认返回nong.jpg
     * @param  deleteFn 删除图片的函数,可不传
     * @param [enlargeHandler] 图片放大函数
     * @param [ floatFlag ] 是否做初始化,默认为true
     *
     */
    var Swiper = React.createClass({
        getInitialState: function () {
            return {
                img_item: ['../public/images/rushDetail/none.jpg'],
                hasInit: false,
            }
        },
        getDefaultProps: function () {
            return {
                floatFlag: true,
                enlargeHandler: ''
            }
        },
        componentWillMount: function () {
            var img_list = this.props.imgList;
            if(img_list == null || img_list == ''){
                img_list = this.state.img_item;
            }
            img_list = $.isArray(img_list) ? img_list : img_list.split(',');

            var img_item = img_list.map(function ( item ) {
                return <SwiperImg data={item} enlargeHandler={this.props.enlargeHandler} deleteFn={this.props.deleteFn} />
            }.bind(this));
            this.setState({
                img_item: this.props.floatFlag ? img_item : ''
            });
        },
        componentDidMount: function () {
            //TODO 可能会影响其他的
            //if ( this.props.floatFlag ) {
            //    var thisSwiper = $(React.findDOMNode(this.refs.swiperComponent)).swiper({
            //        slidesPerView:"auto",
            //        queueEndCallbacks: true
            //    });
            //}
            if(this.props.imgList && this.props.imgList.length) {
                this.initSwiper('mount');
            }
        },
        componentWillReceiveProps: function (nextProps) {
            var img_list = nextProps.imgList;

            if(!nextProps.deleteFn && (img_list == null || img_list == '')){
                return ;
            }
            img_list = $.isArray(img_list) ? img_list : img_list.split(',');
            var img_item = img_list.map(function ( item ) {
                return <SwiperImg data={item} enlargeHandler={this.props.enlargeHandler} deleteFn={this.props.deleteFn} />
            }.bind(this));

            this.setState({
                img_item: img_item
            });

        },
        componentDidUpdate: function ( prevProps, prevState) {

            if ( !this.props.floatFlag ) {
                var $swiper_container = $(React.findDOMNode(this.refs.swiperComponent));

                $swiper_container.css('overflow-x','auto');
                $swiper_container.find('.swiper-wrapper').css('width', 0.9 * this.state.img_item.length +'rem');
            }
            else {
                this.initSwiper('update');
            }
        },
        initSwiper(timing) {
            if(this.state.hasInit) return;

            console.log('init swiper in ' + timing);
            $(React.findDOMNode(this.refs.swiperComponent)).swiper({
                slidesPerView:"auto",
                queueEndCallbacks: true
            });

            this.setState({hasInit: true});
        },
        render: function () {
            //不想显示组件
            if(this.props.imgList == 'null')
                return null;

            return (
                <div ref="swiperComponent" className="swiper-container ">
                    <div className="swiper-wrapper clearfix">
                        {this.state.img_item}
                    </div>
                </div>
            )
        }
    });
}

export default Swiper;
